<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>双色球模拟投注系统</title>
  <style>
    :root {
      /* 明亮主题 */
      --primary-light: #4ecca3;
      --secondary-light: #ff6b6b;
      --bg-light: #f7f7f7;
      --card-light: #ffffff;
      --text-light: #232931;
      --shadow-light: rgba(0, 0, 0, 0.1);

      /* 暗色主题 */
      --primary-dark: #00ffd5;
      --secondary-dark: #ff4757;
      --bg-dark: #1a1a2e;
      --card-dark: #16213e;
      --text-dark: #e2e2e2;
      --shadow-dark: rgba(0, 0, 0, 0.3);

      /* 当前主题（默认明亮） */
      --primary-color: var(--primary-light);
      --secondary-color: var(--secondary-light);
      --bg-color: var(--bg-light);
      --card-bg: var(--card-light);
      --text-color: var(--text-light);
      --shadow-color: var(--shadow-light);
    }

    /* 暗色主题样式 */
    [data-theme="dark"] {
      --primary-color: var(--primary-dark);
      --secondary-color: var(--secondary-dark);
      --bg-color: var(--bg-dark);
      --card-bg: var(--card-dark);
      --text-color: var(--text-dark);
      --shadow-color: var(--shadow-dark);
    }

    /* 主题切换按钮 */
    .theme-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      perspective: 1000px;
      transform-style: preserve-3d;
    }

    .theme-toggle button {
      background: var(--card-bg);
      border: 2px solid var(--primary-color);
      padding: 10px 20px;
      border-radius: 30px;
      cursor: pointer;
      transform: translateZ(20px);
      transition: all 0.3s ease;
    }

    /* 3D卡片效果 */
    .card {
      perspective: 1000px;
      transform-style: preserve-3d;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px) rotateX(5deg);
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
          transparent 0%,
          rgba(255, 255, 255, 0.05) 50%,
          transparent 100%);
      transform: translateZ(-1px);
      pointer-events: none;
    }

    /* 3D球效果 */
    .ball {
      position: relative;
      transform-style: preserve-3d;
      transition: all 0.3s ease;
    }

    .ball::before {
      content: '';
      position: absolute;
      inset: 2px;
      border-radius: 50%;
      background: linear-gradient(45deg,
          rgba(255, 255, 255, 0.5),
          transparent);
      filter: blur(2px);
    }

    .ball:hover {
      transform: translateZ(10px) scale(1.1);
    }

    /* 炫酷动画效果 */
    @keyframes float {

      0%,
      100% {
        transform: translateY(0) rotateX(0);
      }

      50% {
        transform: translateY(-10px) rotateX(5deg);
      }
    }

    .betting-options button {
      animation: float 3s ease-in-out infinite;
      animation-delay: calc(var(--btn-index) * 0.2s);
    }

    /* 发光效果 */
    .glow {
      position: relative;
      overflow: hidden;
    }

    .glow::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle,
          rgba(255, 255, 255, 0.1) 0%,
          transparent 70%);
      animation: rotate 10s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* 更新其他样式 */
    .red-ball {
      background: linear-gradient(145deg, var(--secondary-color), #ff8f8f);
      box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
    }

    .blue-ball {
      background: linear-gradient(145deg, var(--primary-color), #00d4ff);
      box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
    }

    /* 响应式3D效果 */
    @media (max-width: 768px) {
      .card {
        transform-style: flat;
      }

      .ball::before {
        display: none;
      }
    }

    /* 在现有样式变量后添加基础样式 */

    body {
      margin: 0;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
      min-height: 100vh;
      transition: all 0.3s ease;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
    }

    h1,
    h3 {
      color: var(--primary-color);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin: 20px 0;
    }

    .card {
      background: var(--card-bg);
      border-radius: 15px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: 0 10px 20px var(--shadow-color);
      position: relative;
      overflow: hidden;
    }

    .balance {
      font-size: 24px;
      text-align: center;
      margin: 20px 0;
    }

    button {
      background: var(--card-bg);
      color: var(--primary-color);
      border: 2px solid var(--primary-color);
      padding: 10px 20px;
      border-radius: 30px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      transition: all 0.3s ease;
      margin: 5px;
    }

    button:hover {
      background: var(--primary-color);
      color: var(--bg-color);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px var(--shadow-color);
    }

    .ball {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin: 5px;
      cursor: pointer;
      font-weight: bold;
      color: white;
      user-select: none;
      position: relative;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .betting-options {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
      justify-content: center;
      margin: 20px 0;
    }

    .betting-options label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-color);
    }

    input[type="number"] {
      background: var(--card-bg);
      border: 2px solid var(--primary-color);
      color: var(--text-color);
      padding: 8px;
      border-radius: 5px;
      width: 80px;
      font-size: 16px;
    }

    input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--primary-color);
    }

    .history-item {
      background: var(--card-bg);
      border-radius: 10px;
      padding: 15px;
      margin: 10px 0;
      border-left: 4px solid transparent;
      transition: all 0.3s ease;
      animation: slideIn 0.5s ease forwards;
      opacity: 0;
      transform: translateY(20px);
    }

    @keyframes slideIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .history-item.won {
      border-left-color: var(--primary-color);
      background: linear-gradient(to right,
          rgba(78, 204, 163, 0.1),
          transparent);
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 8px;
      margin: 15px 0;
    }

    th,
    td {
      padding: 12px;
      text-align: left;
      background: var(--card-bg);
    }

    th {
      background: var(--primary-color);
      color: var(--bg-color);
      font-weight: bold;
      position: relative;
      overflow: hidden;
    }

    th:first-child {
      border-radius: 8px 0 0 8px;
    }

    th:last-child {
      border-radius: 0 8px 8px 0;
    }

    td {
      border-bottom: 1px solid var(--shadow-color);
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 25px;
      background: var(--primary-color);
      color: var(--bg-color);
      border-radius: 8px;
      box-shadow: 0 5px 15px var(--shadow-color);
      z-index: 1000;
    }

    /* 添加一些炫酷的动画效果 */
    .selected {
      animation: pulse 1s ease infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--primary-color), 0.7);
      }

      70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(var(--primary-color), 0);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--primary-color), 0);
      }
    }

    /* 响应式设计补充 */
    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }

      .betting-options {
        flex-direction: column;
        align-items: stretch;
      }

      .betting-options label {
        justify-content: center;
      }

      .ball {
        width: 35px;
        height: 35px;
        font-size: 14px;
      }

      .notification {
        left: 20px;
        right: 20px;
        text-align: center;
      }
    }

    /* 添加一些微妙的动画 */
    .card:hover .glow::after {
      opacity: 1;
    }

    .theme-toggle button {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      color: var(--text-color);
    }

    .theme-toggle button:hover {
      transform: translateZ(30px) scale(1.1);
    }

    #redBalls,
    #blueBalls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin: 15px 0;
    }

    /* 用户信息相关样式 */
    .user-info-brief {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 10px;
      background: var(--card-bg);
      border-radius: 10px;
      box-shadow: 0 5px 15px var(--shadow-color);
    }

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--primary-color);
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .user-brief {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .icon-button {
      background: transparent;
      border: none;
      color: var(--primary-color);
      cursor: pointer;
      padding: 5px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .icon-button:hover {
      background: var(--primary-color);
      color: var(--bg-color);
    }

    /* 用户面板样��� */
    .user-panel {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 400px;
      height: 100vh;
      background: var(--card-bg);
      box-shadow: -5px 0 20px var(--shadow-color);
      transition: right 0.3s ease;
      z-index: 1000;
    }

    .user-panel.active {
      right: 0;
    }

    .panel-content {
      height: 100%;
      overflow-y: auto;
      padding: 20px;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .close-button {
      background: transparent;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: var(--text-color);
    }

    .avatar-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .avatar-upload img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--primary-color);
    }

    .avatar-upload input[type="file"] {
      display: none;
    }

    .profile-info {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .account-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin: 20px 0;
    }

    .stat-card {
      background: var(--bg-color);
      padding: 15px;
      border-radius: 10px;
      text-align: center;
    }

    .transaction-history {
      margin-top: 20px;
    }

    .transaction-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .transaction-item {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: var(--bg-color);
      border-radius: 8px;
      animation: slideIn 0.3s ease;
    }

    .transaction-item .amount {
      font-weight: bold;
    }

    .amount.positive {
      color: #4CAF50;
    }

    .amount.negative {
      color: #f44336;
    }

    /* 移动端优化样式 */
    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }

      h1 {
        font-size: 24px;
      }

      h3 {
        font-size: 18px;
      }

      .card {
        padding: 15px;
        margin: 10px 0;
      }

      .user-info-brief {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
      }

      .user-brief {
        width: 100%;
        text-align: center;
        margin: 10px 0;
      }

      .betting-options {
        flex-direction: column;
        gap: 10px;
      }

      .betting-options button {
        width: 100%;
        padding: 12px;
        font-size: 16px;
      }

      .betting-options label {
        width: 100%;
        justify-content: space-between;
        padding: 5px 0;
      }

      /* 球号布局优化 */
      #redBalls,
      #blueBalls {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 8px;
        padding: 10px;
      }

      .ball {
        width: 100%;
        height: 40px;
        margin: 0;
        font-size: 16px;
      }

      /* 用户面板优化 */
      .user-panel {
        max-width: 100%;
      }

      .panel-content {
        padding: 15px;
      }

      .account-stats {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .stat-card {
        padding: 15px 10px;
      }

      /* 投注历史优化 */
      .history-item {
        font-size: 14px;
        padding: 12px;
      }

      .history-item p {
        margin: 5px 0;
      }

      /* 奖级表格优化 */
      table {
        font-size: 14px;
      }

      th,
      td {
        padding: 8px;
      }

      /* 触摸优化 */
      button,
      .ball,
      .icon-button {
        min-height: 44px;
        /* 最小触摸区域 */
        touch-action: manipulation;
        /* 防止双击缩放 */
      }

      /* 底部操作栏 */
      .mobile-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card-bg);
        padding: 10px;
        box-shadow: 0 -2px 10px var(--shadow-color);
        display: flex;
        gap: 10px;
        z-index: 900;
      }

      .mobile-action-bar button {
        flex: 1;
        margin: 0;
      }

      /* 为底部操作栏留出空间 */
      .container {
        padding-bottom: 70px;
      }

      /* 通知优化 */
      .notification {
        left: 10px;
        right: 10px;
        bottom: 80px;
        top: auto;
        text-align: center;
        font-size: 14px;
      }

      /* 主题切换按钮位置调整 */
      .theme-toggle {
        top: 10px;
        right: 10px;
      }

      .theme-toggle button {
        padding: 8px 12px;
        font-size: 14px;
      }

      /* 滚动优化 */
      .panel-content,
      .transaction-list {
        -webkit-overflow-scrolling: touch;
      }

      /* 输入框优化 */
      input[type="number"],
      input[type="text"] {
        font-size: 16px;
        /* 防止iOS自动放大 */
        padding: 8px;
      }

      /* 添加下拉刷新提示 */
      .pull-to-refresh {
        text-align: center;
        padding: 10px;
        color: var(--text-color);
        opacity: 0.7;
      }
    }

    /* 适配不同屏幕高度 */
    @media (max-height: 700px) {
      .user-panel {
        height: 90vh;
      }

      .panel-header h3 {
        font-size: 18px;
        margin: 10px 0;
      }

      .avatar-upload img {
        width: 80px;
        height: 80px;
      }
    }

    /* 横屏优化 */
    @media (max-width: 768px) and (orientation: landscape) {
      .user-panel {
        height: 100vh;
      }

      .account-stats {
        grid-template-columns: repeat(3, 1fr);
      }

      #redBalls,
      #blueBalls {
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
      }

      .ball {
        height: 35px;
        font-size: 14px;
      }
    }

    /* 修改球的基础样式 */
    .ball {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin: 5px;
      cursor: pointer;
      font-weight: bold;
      color: white;
      user-select: none;
      position: relative;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    /* 修改红球样式 */
    .red-ball {
      background: linear-gradient(145deg, var(--secondary-color), #ff8f8f);
      box-shadow: 0 3px 6px rgba(255, 107, 107, 0.2);
    }

    /* 修改蓝球样式 */
    .blue-ball {
      background: linear-gradient(145deg, var(--primary-color), #00d4ff);
      box-shadow: 0 3px 6px rgba(0, 212, 255, 0.2);
    }

    /* 选中效果 */
    .ball.selected {
      transform: scale(1.1);
      border: 2px solid white;
      animation: selectedPulse 2s infinite;
    }

    .red-ball.selected {
      box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.3),
        0 0 20px rgba(255, 107, 107, 0.5);
    }

    .blue-ball.selected {
      box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.3),
        0 0 20px rgba(0, 212, 255, 0.5);
    }

    /* 选中动画 */
    @keyframes selectedPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
      }

      70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }
    }

    /* 悬浮效果 */
    .ball:hover {
      transform: translateY(-2px);
    }

    .ball.selected:hover {
      transform: scale(1.15) translateY(-2px);
    }

    /* 添加选中数字提示 */
    .ball.selected::after {
      content: attr(data-index);
      position: absolute;
      top: -15px;
      right: -5px;
      background: var(--primary-color);
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* 暗色主题适配 */
    [data-theme="dark"] .ball.selected {
      border-color: var(--primary-color);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .ball.selected {
        transform: scale(1.05);
      }

      .ball.selected:hover {
        transform: scale(1.05);
      }

      .ball.selected::after {
        top: -10px;
        right: -3px;
        width: 16px;
        height: 16px;
        font-size: 10px;
      }
    }

    .lottery-types {
      background: var(--card-bg);
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 5px 15px var(--shadow-color);
    }

    .lottery-tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      overflow-x: auto;
      padding-bottom: 5px;
    }

    .lottery-tab {
      padding: 10px 20px;
      border-radius: 20px;
      background: transparent;
      border: 2px solid var(--primary-color);
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .lottery-tab.active {
      background: var(--primary-color);
      color: var(--bg-color);
    }

    .lottery-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }

    .next-draw {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    #countdown {
      font-family: monospace;
      font-size: 18px;
      color: var(--primary-color);
    }

    /* 快3骰子样式 */
    .dice-container {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin: 20px 0;
    }

    .dice {
      width: 60px;
      height: 60px;
      background: white;
      border-radius: 10px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      padding: 5px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    }

    .dot {
      width: 8px;
      height: 8px;
      background: #333;
      border-radius: 50%;
      margin: auto;
    }

    /* PK10样式 */
    .pk10-numbers {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .pk10-ball {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      background: linear-gradient(145deg, #ff6b6b, #ff4757);
    }
  </style>
</head>

<body>
  <div class="theme-toggle">
    <button onclick="toggleTheme()" id="themeToggle">
      🌞 Light Mode
    </button>
  </div>
  <div class="container">
    <h1>未来彩票投注系统</h1>

    <div class="lottery-types">
      <div class="lottery-tabs">
        <button class="lottery-tab active" data-type="SSQ">双色球</button>
        <button class="lottery-tab" data-type="QLC">七乐彩</button>
        <button class="lottery-tab" data-type="FAST3">快3</button>
        <button class="lottery-tab" data-type="PK10">PK10</button>
      </div>

      <div class="lottery-info">
        <div class="next-draw">
          <span>距下期开奖:</span>
          <span id="countdown">00:00:00</span>
        </div>
        <div class="current-period">
          第<span id="currentPeriod">20240001</span>期
        </div>
      </div>
    </div>

    <div class="card">
      <div class="balance">
        <div class="user-info-brief">
          <div class="avatar" id="userAvatar">
            <!-- 默认头像 -->
            <img
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234ecca3' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E"
              alt="用户头像">
          </div>
          <div class="user-brief">
            <span id="userNickname">未设置昵称</span>
            <span class="balance-amount">余额: ¥<span id="userBalance">100</span></span>
          </div>
          <button onclick="openUserPanel()" class="icon-button">
            <span class="material-icons">account_circle</span>
          </button>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="number-select">
        <h3>选择红球（选6个）</h3>
        <div id="redBalls"></div>

        <h3>选择蓝球（选1个）</h3>
        <div id="blueBalls"></div>
      </div>

      <div class="betting-options">
        <button onclick="randomSelect()">机选号码</button>
        <button onclick="clearSelection()">清空选择</button>
        <button onclick="placeBet()">投注 (¥2/注)</button>
        <button onclick="drawLottery()">开奖</button>
        <label>
          <input type="number" id="multipleInput" value="1" min="1" max="50"> 倍投
        </label>
        <label>
          <input type="checkbox" id="continuousDraw"> 追加5期
        </label>
      </div>
    </div>

    <div class="card">
      <div class="result" id="result"></div>
    </div>

    <div class="card">
      <h3>投注记录</h3>
      <div id="historyList"></div>
    </div>

    <div class="card">
      <h3>中奖规则</h3>
      <table id="prizeTable">
        <tr>
          <th>奖级</th>
          <th>中奖条件</th>
          <th>奖金</th>
        </tr>
      </table>
    </div>
  </div>

  <!-- 添加用户面板 -->
  <div id="userPanel" class="user-panel">
    <div class="panel-content">
      <div class="panel-header">
        <h3>用户信息</h3>
        <button onclick="closeUserPanel()" class="close-button">&times;</button>
      </div>

      <div class="panel-body">
        <div class="user-profile">
          <div class="avatar-upload">
            <img id="profileAvatar" src="" alt="头像">
            <input type="file" id="avatarInput" accept="image/*" onchange="handleAvatarChange(event)">
            <button onclick="document.getElementById('avatarInput').click()">更换头像</button>
          </div>

          <div class="profile-info">
            <label>
              昵称:
              <input type="text" id="nicknameInput" placeholder="设置昵称">
            </label>
            <button onclick="saveUserInfo()">保存信息</button>
          </div>
        </div>

        <div class="account-stats">
          <div class="stat-card">
            <h4>总投注</h4>
            <span id="totalBets">¥0</span>
          </div>
          <div class="stat-card">
            <h4>总中奖</h4>
            <span id="totalWins">¥0</span>
          </div>
          <div class="stat-card">
            <h4>净收益</h4>
            <span id="netProfit">¥0</span>
          </div>
        </div>

        <div class="transaction-history">
          <h4>收支明细</h4>
          <div class="transaction-list" id="transactionList">
            <!-- 交易记录将通过JS动态添加 -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="mobile-action-bar" id="mobileActionBar">
    <button onclick="randomSelect()">机选</button>
    <button onclick="placeBet()">投注</button>
    <button onclick="drawLottery()">开奖</button>
  </div>

  <script src="script.js"></script>
</body>

</html>